<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>贪吃蛇</title>  
    <style>  
    
    h1 {
        width: 500px;
        text-align: center;
      }
      .tips {
        background-color: azure;
        padding: 12px;
        width: 480px;
        text-align: center;
      }
      .snake-area {
        position: relative;
        background-color: rgb(243, 233, 220);
        border: 2px solid #d8d8d8;
        width: 500px;
        height: 360px;
      }
      .snake-li {
        position: absolute;
        top: 0;
        left: 0;
      }
      .snake,
      #snake {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: rgb(59, 94, 221);
      }
      #snake {
        top: calc(50% - 10px);
        left: calc(50% - 10px);
        background-color: rgb(247, 75, 12);
      }
    </style>  
</head>  
<body>  
    <h1>贪吃蛇</h1>  
    姓名：<input type="text" id="userName" />  
    <input type="button" id="kaishi" value="开始" onclick="startGame()" />  
    <div class="tips">  
        方向键控制方块移动，吃到方块增长，最快增长到10个方块为胜利。  
    </div>  
    <div class="snake-area">  
        <div id="snakeHead" class="snake" style="top: calc(50% - 5px); left: calc(50% - 5px);"></div>  
    </div>  
  
    <script>  
        let timeStart, snakeHead, snakeBody = [], foodPositions = [], shengyu = 0;  
  
        function startGame() {  
            timeStart = Date.now();  
            shengyu = 0;  
            snakeHead = document.getElementById('snakeHead');  
            snakeBody = [];  
            foodPositions = [];  
  
            initSnake();  
            generateFood();  
  
            document.addEventListener('keydown', handleKeydown);  
            setInterval(checkGameOver, 100);  
        }  
  
        function initSnake() {  
            snakeBody.push({ x: 245, y: 175 }); // 初始蛇头位置  
            updateSnakePosition();  
        }  
  
        function generateFood() {  
            const foodCount = 10; // 初始食物数量  
            for (let i = 0; i < foodCount; i++) {  
                const x = Math.floor(Math.random() * 48) * 10 + 10;  
                const y = Math.floor(Math.random() * 35) * 10 + 10;  
                foodPositions.push({ x, y });  
                createFoodElement(x, y);  
            }  
        }  
  
        function createFoodElement(x, y) {  
            const food = document.createElement('div');  
            food.className = 'food';  
            food.style.left = `${x}px`;  
            food.style.top = `${y}px`;  
            document.querySelector('.snake-area').appendChild(food);  
        }  
  
        function handleKeydown(e) {  
            // 方向键控制逻辑  
            // 注意：这里需要添加一些逻辑来避免蛇立即反向移动  
        }  
  
        function moveSnake(direction) {  
            // 实现蛇的移动逻辑  
            // 更新蛇头的位置，并根据需要添加新的身体部分  
        }  
  
        function checkGameOver() {  
            // 检查游戏是否结束：撞墙、撞自己或吃到所有食物  
            if (/* 撞墙或撞自己 */) {  
                endGame('失败');  
            } else if (foodPositions.length === 0) {  
                endGame('胜利');  
            }  
        }  
  
        function endGame(result) {  
            const timeEnd = Date.now();  
            const timeTaken = (timeEnd - timeStart) / 1000;  
            alert(`${result}，你的用时：${timeTaken.toFixed(2)}秒`);  
            // 清理事件监听器和定时器，重置游戏状态等  
        }  
  
        // ... 其他函数和逻辑  
  
    </script>  
</body>  
</html>